<template>

    <div class="index1">

        <Table :columns="columns" height="400" :data="data">
            <template #action="{ row, index }">
            <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">查看分享</Button>
            </template>
        </Table>
        <Modal v-model="modal" title="分享链接" @on-cancel="cancel">
      <P @click="chakan()" style="cursor: pointer;">{{ fxlj }}</P>
    </Modal>
</div>
</template>
<style>
.index1 {
    width: 100%;
    height: 100%;
}
</style>
<script setup>
import { onMounted, ref } from 'vue';
import service from '../utils/request';
const modal=ref(false)
const cancel=()=>{
    modal.value=false
}
const fileID=ref("")
const fxlj=ref("")
const chakan=async()=>{
    const res = await service.post("/shareread", {
    file_id: fileID.value,
    sharedurl: fxlj.value
  })
  console.log(res, "res")
  window.location.href = res.data.url
}
const show=(e)=>{
    fxlj.value=e.url
    fileID.value=e.file.id
    modal.value=true
}
onMounted(() => {
    getlist()
})
const getlist = async () => {
    const res = await service.post("/sharelist");
    console.log(res, "res")
    data.value = res.data;
    data.value.forEach(el => {
        el.fileName = ""
        el.fileName = el.file.name
        el.url = 'http://192.168.2.32:7001/share/' + el.sharedurl
    })
}
const data = ref([])
const columns = ref([
    {
        title: "名称",
        key: "fileName"
    },
    {
        title: "分享链接",
        key: "url"
    },
    {
        title: '操作',
        slot: 'action',
        width: 150,
        align: 'center'
    }

])
</script>